import React from 'react';
import './App.css';
import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import Money from './views/Money';
import Statistics from './views/Statistics';
import Tags from './views/Tags';
import NoMatch from './views/NoMatch';
import styled, {ThemeProvider} from 'styled-components';
import {Tag} from './views/Tag';

const AppWrapper = styled.div`
  box-shadow: 0 0 5px 5px #ccc;
  max-width: 425px;
  margin: 0 auto;
`;

const theme = {
  main: '#0066FF',
  light: '#E5EFFF'
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <AppWrapper>
        <Router>
          <Switch>
            <Route exact path="/money" >
              <Money/>
            </Route>
            <Route exact path="/tags" >
              <Tags/>
            </Route>
            <Route exact path="/tags/:id">
              <Tag/>
            </Route>
            <Route exact path="/statistics">
              <Statistics/>
            </Route>
            <Redirect exact from="/" to="/money"/>
            <Route path="*">
              <NoMatch/>
            </Route>
          </Switch>
        </Router>
      </AppWrapper>
    </ThemeProvider>
  );
}


export default App;
